<template>
  <div class="pre-loading">
    <!-- 页面预加载 -->
    <page-pre-item
      v-for="(item, index) in 1"
      :key="item"
      v-if="isInit"
      :reportId="reportId"
      :levelIndex="levelIndex"
      @fMethod="fMethod"
    ></page-pre-item>

    <template v-for="(item, index) in home.list" v-if="!isInit">
      <div class="page-num">{{ index + 1 }}</div>
      <page-item
        :list="item.data"
        :pageLen="home.list.length"
        :currentPage="item.page"
        :pageTopList="pageT"
        :pageBottomList="pageB"
      ></page-item>
    </template>
  </div>
</template>
<script>
import pagePreItem from './pagePreItem'
import pageItem from './pageItem.vue'
import { mapState } from 'vuex'
import store from '../store/index'
export default {
  computed: {
    ...mapState(['home'])
  },
  components: {
    pagePreItem,
    pageItem
  },
  created() {
    this.reportId = this.getQueryVariable('reportId')
    this.levelIndex = this.getQueryVariable('levelIndex')
  },
  mounted() {
    this.isInit = true
  },
  updated() {
    this.$nextTick(() => {
      this.$store.dispatch('home/getList')
      this.isInit = false
      this.htmlChange()
    })
  },
  data() {
    return {
      isInit: true,
      upDateVal: 0,
      reportId: '',
      levelIndex: '',
      pageT: '',
      pageB: ''
    }
  },
  methods: {
    fMethod() {
      this.isInit = false
      this.$store.dispatch('home/getList')
      this.htmlChange()
    },
    getQueryVariable(variable) {
      var query = window.location.href
      var temp1 = query.split('?')
      var pram = temp1[1]
      var vars = pram.split('&')
      for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split('=')
        if (pair[0] == variable) {
          return pair[1]
        }
      }
      return false
    },
    htmlChange() {
      this.$nextTick(() => {
        if (this.upDateVal == 0) {
          this.htmlall()
        }
        this.upDateVal = 1
      })
    },
    htmlall() {
      let htmlArr = document.getElementsByClassName('w-content')
      // console.log(htmlArr);
      this.home.list.forEach((item, index) => {
        // for (let items of htmlArr){
          for (let indexs = 0, len = htmlArr.length; indexs < len; indexs++) {
            let items = htmlArr[indexs]
        // htmlArr.forEach((items, indexs) => {
          //  最后一页单独获取页面元素
          if (item.isLast == true) {
            let html = ''
            // item.ids.forEach(i => {
            //   console.log(document.getElementById(i).outerHTML);
            //   html += document.getElementById(i).outerHTML
            // })
            // console.log(html);
            item.html = items.innerHTML
            let echartValue = []
            item.data.forEach((citem, cindex) => {
              if (citem.detailType == 10) {
                echartValue.push({
                  id: citem.htmlId,
                  data: citem.data
                })
              }
            })
            if (echartValue.length != 0) {
              item.echartValue = JSON.stringify(echartValue)
            }
            item.index = item.page
            item.reportId = this.reportId
            item.levelIndex = this.levelIndex
            item.page = null
          } else {
            if (index == indexs) {
              item.html = items.innerHTML
              let echartValue = []
              item.data.forEach((citem, cindex) => {
                if (citem.detailType == 10) {
                  echartValue.push({
                    id: citem.htmlId,
                    data: citem.data
                  })
                }
              })
              if (echartValue.length != 0) {
                item.echartValue = JSON.stringify(echartValue)
              }
              item.index = item.page
              item.reportId = this.reportId
              item.levelIndex = this.levelIndex
              item.page = null
            }
          }
        }
        let nowList = this.home.list
      })
       this.savePreprocessReportHtml(this.home.list)
    },
    savePreprocessReportHtml(params) {
      params.forEach(item => {
        item.ids = item.ids.join(';')
      })
      this.api
        .savePreprocessReportHtml({
          reportId: this.reportId,
          levelIndex: this.levelIndex,
          preprocessReportPage: params
        })
        .then(res => {
          let newDiv = document.createElement('DIV')
          newDiv.id = 'htmlOver'
          let htmlArr = document.getElementsByClassName('pre-loading')
          for(let item of htmlArr){
          // htmlArr.forEach((item, index) => {
            item.appendChild(newDiv)
          }
        })
    }
  }
}
</script>
<style scoped>
.page-num {
  font-size: 30px;
  text-align: center;
}
</style>
